import React, { useEffect } from 'react'
import { Modal, Button, Form, Input, message, Select } from 'antd';
import { useDispatch, useSelector } from "umi"
import { addone, updateone } from "../http/combo"

export default function managementUseradd(props) {
    const [form] = Form.useForm();
    const dispatch = useDispatch()
    const isModalVisible = useSelector(state => state.comboModels.active)
    const openstatus = useSelector(state => state.comboModels.status)
    const id = useSelector(state => state.comboModels.id)
    const handleOk = () => {
        dispatch({
            type: 'comboModels/changestatus',
            payload: false
        })
        form.resetFields();
    };

    const handleCancel = () => {
        dispatch({
            type: 'comboModels/changestatus',
            payload: false
        })
        form.resetFields();
    };

    useEffect(() => {
        form.setFieldsValue({
            ...id
        });
    }, [id, form])
    // const change=()=>{

    // }
    const onFinish = async (values) => {
        if (openstatus == "修改套餐") {
            //修改
            const res = await updateone(
                {
                    _id: id._id,
                    ...values
                }
            )
            if (res.meta.status == 200) {
                props.getdata()
                dispatch({
                    type: 'comboModels/changestatus',
                    payload: false
                })
                message.success('修改成功')
                form.resetFields();
            } else {
                message.error('修改失败')
            }
        } else if (openstatus == "新增套餐") {
            //新增
            const res = await addone(
                values
            )
            if (res.meta.status == 200) {
                props.getdata()
                dispatch({
                    type: 'comboModels/changestatus',
                    payload: false
                })
                message.success('新增成功')
                form.resetFields();
            } else {
                message.error('新增失败')
            }
        }


    };

    return (
        <>
            <Modal title={openstatus} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} getContainer={false}>
                <Form
                    name="basic"
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    form={form}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="套餐名字"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入您的套餐名字!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="套餐月数"
                        name="mouth"
                        rules={[
                            {
                                required: true,
                                message: '请输入您的套餐月数!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="套餐折扣"
                        name="salePrice"
                        rules={[
                            {
                                required: true,
                                message: '请输入您的套餐折扣!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="原价"
                        name="normalPrice"
                        rules={[
                            {
                                required: true,
                                message: '请输入您的原价!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="type"
                        label="是否推荐"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select
                            placeholder="请输入您是否推荐"
                            allowClear
                        >
                            <Select.Option value='1'>是</Select.Option>
                            <Select.Option value="0">否</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 10,
                            span: 10,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
